<template>
	<view class="scen-rank">
		<!--标题栏-->
		<bar-title  bgColor='bg-white' :isSolid='false'>
			<block slot="content">剧本排行</block>
		</bar-title>
		
		
		<!-- 导航 -->
		<view class="navbar-box cu-bar fixed">
			<view class="flex response">
				<view class='flex-sub radius'
					v-for="(item, index) in navList" :key="index"
					:class="{active:tabCurrentIndex === index}"
					@click="tabClick(index)"
				>
					<view class="cu-tag round response">
						{{item.text}}
					</view> 
				</view>
			</view>
		</view>	
			
		<swiper :current="tabCurrentIndex" 
			class="swiper-box fixed" 
			:style="[{height:'calc(100vh - '+ navigationBarHeight + 'px - 100rpx)'},{top: navigationBarHeight + 'px'}]"
			duration="300" 
			@change="changeTab">
			<swiper-item class="tab-content" 
				v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>
				
					<!-- 订单列表 -->
					<view class="scen-list" v-if="tabItem.scenList">
						<block v-for="(info,index) of tabItem.scenList" :key="index">
							<ViewScen :scen-info="info" :rank="index+1"></ViewScen>
						</block>
					</view>
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.scenList.length === 0"></empty>
					<uni-load-more v-else :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>



<script>
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import empty from "@/components/basics/empty";
import ViewScen from '@/components/box/ViewScen.vue';
import { Scen } from '@/models/scen.js';
export default {
	components: {
		uniLoadMore,
		empty,
		ViewScen
	},
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					type: 'week',
					text: '周榜',
					pagenum: 0,
					loaded: false,
					loadingType: 'more',
					scenList: []
				},
				{
					type: 'month',
					text: '月榜',
					pagenum: 0,
					loaded: false,
					loadingType: 'more',
					scenList: []
				}, {
					type: 'all',
					text: '全部',
					pagenum: 0,
					loaded: false,
					loadingType: 'more',
					scenList: []
				}
			],
		}
	},
	computed: {
		navigationBarHeight(){
			return this.systemInfo.navigationBarHeight;
		}
	},
	onLoad(option) {
		if(option && option.cur) {
			console.log(option);
			this.tabCurrentIndex = option.cur-0 || 0
		}
		this.loadData()
	},
	methods: {
		//swiper 切换
		changeTab(e){
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index){
			this.tabCurrentIndex = index;
		},
		//获取订单列表
		loadData(source){
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let type = navItem.type;
			
			if(source === 'tabChange' && navItem.loaded === true){
				//tab切换只有第一次需要加载数据
				return;
			}
			if(navItem.loadingType === 'loading'){
				//防止重复加载
				return;
			}
			navItem.loadingType = 'loading';
			navItem.pagenum = navItem.pagenum + 1;
			
			Scen.scenListByRank({
				pagenum: navItem.pagenum,
				type 
			}).then(scenList => {
				if(!scenList.length) {
					navItem.loadingType = 'noMore';
					return
				}
				scenList.forEach(scen => {
					navItem.scenList.push(scen);
				})
				this.$set(navItem, 'loaded', true);
				navItem.loadingType = 'more';
				
			})	
		}, 
	}
}
</script>

<style lang="scss" scoped>
	page, .scen-rank{
		background: #FFFFFF;
		height: 100%;
	}
	.list-scroll-content{
		height: 100%;
	}
	.swiper-box{
		margin-top: 100rpx;
	}
	.navbar-box{
		top: var(--status-bar-height);
		background: #FFFFFF;
		margin-top: 100rpx;
		padding: 10rpx 15rpx;
		box-shadow: none;
		.flex-sub{
			margin: 0 15rpx;
		}
		.cu-tag {
			flex: 1;
			height: 50rpx;
			font-size: 15px;
			font-weight: 400;
			background-color: #F8FAFF;
		}
		.active {
			.cu-tag {
				background-color: #2EB9C3;
				color: #fff;
			}
			
		}
	}
	
</style>
